<template>
  <div>
    <el-col :span="24">
      <el-row :gutter="5">
        <el-col :span="24">
          <el-card class="box-card">
            <el-descriptions class="margin-top " :contentStyle="CS" :label-style="LS" title="" :column="2" size="medium" border>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-c-scale-to-original"></i>
                  编号
                </template>
                {{form.nos}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-time"></i>
                  发票编码
                </template>
                {{form.invoiceCode}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  申请金额
                </template>
                {{form.totalAmount}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  申请时间
                </template>
                {{ parseTime(form.invoiceDate, '{y}-{m}-{d} {h}:{i}:{s}') }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  审核人
                </template>
                {{form.assessBy}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  审核意见
                </template>
                {{form.assessOpinion}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  审核时间
                </template>
                {{ parseTime(form.assessTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  发票状态
                </template>
                <dict-tag :options="dict.type.buy_invoice_status" :value="form.status"/>
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-bank-card"></i>
                  发票照片
                </template>
                <file-upload-show :value="form.invoiceFile"></file-upload-show>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="form.type !=='4'">
          <el-table v-loading="loading" :data="invoiceRukuRelList" border
                    show-summary :summary-method="getSummariesRel" ref="relTable">
            <el-table-column label="序号" align="center" type="index" width="100"/>
            <el-table-column label="发票编号" align="center" prop="invoiceCode"/>
            <el-table-column label="入库单编号" align="center" prop="storeNos"/>
            <el-table-column label="产品名称" align="center" prop="goodsName"/>
            <el-table-column label="产品编号" align="center" prop="goodsCode"/>
            <el-table-column label="产品型号" align="center" prop="goodsModel"/>
            <el-table-column label="金额" align="center" prop="amount"/>
          </el-table>
        </el-col>
      </el-row>
    </el-col>

  </div>
</template>

<script>
import {
  accAdd,
  deleteAction, downloadFile,
  getAction, getById
} from '@/api/manage'
  import GoodsInvoiceDetail from '@/views/develop/goodsInvoiceDetail/module/GoodsInvoiceDetail'
  import FileUploadShow from "@/components/FileUpload/FileUploadShow.vue";

  export default {
    name: "FinanceBuyInvoiceSection",
    dicts: ["buy_invoice_status"],
    components: {
      FileUploadShow,
      GoodsInvoiceDetail,
    },
    props: {
      invoiceId: {
        type: String,
        default: "",
      },
    },
    watch: {
      invoiceId: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.getInvoiceInfo();
          }
        },
        immediate: true
      },
    },
    data() {
      return {
        activeName: "first",
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 核销明细信息管理表格数据
        invoiceRukuRelList: [],
        CS: {
          'text-align': 'center',  //文本居中
          'min-width': '250px',   //最小宽度
          'word-break': 'break-all'  //过长时自动换行
        },
        LS: {
          'color': '#000',
          'text-align': 'center',
          'font-weight': '600',
          'height': '40px',
          'min-width': '110px',
          'word-break': 'keep-all'
        },
        form:{},
        url: {
          getById: '/financeBuyInvoice/financeBuyInvoice/',
        },
      };
    },
    created() {

    },
    methods: {
      getInvoiceInfo() {
        getById(this.url.getById,this.invoiceId).then(response => {
          this.form = response.data;
          this.loading = false;
          this.invoiceRukuRelList = response.data.invoiceRukuRelList;
        });
      },
      getSummariesRel(param) {
        const {columns, data} = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = "合计";
            return;
          }
          const values = data.map((item) => Number(item[column.property]));
          // 只合计amount1和amount3，想合并哪些列就在这里指定
          if (column.property === "amount") {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return accAdd(prev, curr);
              } else {
                return prev;
              }
            }, 0);
          }
        });
        return sums;
      },


    }
  };
</script>
